<!DOCTYPE html>
<html>
<head>
    <title>管理</title>
    <#include "/header.html">
    <style>
        .layui-rate li i.layui-icon {
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="margin: 10px 0">
            <form class="layui-form layui-form-pane" action="" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" placeholder="搜索用户名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="form-search-btn"><i class="layui-icon layui-icon-search"></i>搜索</button>
                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="form-reset-btn"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <#if shiro.hasPermission("app:comment:save")>
        <button class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加 </button>
        </#if>
    </div>
</script>
<script type="text/html" id="currentTableBar">
    <#if shiro.hasPermission("app:comment:save")>
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </#if>
    <#if shiro.hasPermission("app:comment:delete")>
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </#if>
</script>
<script type="text/html" id="currentTableScoreTpl">
    <div id="score{{d.id}}"></div>
    {{# if(d.isGood == 1){ }}
    <span class="layui-badge layui-bg-grey">满意</span>
    {{# } }}
</script>

<script type="text/html" id="currentTableStatusTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusFilter" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="currentTableBar">
    <#if shiro.hasPermission("app:comment:save")>
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
    </#if>
</script>

<script type="text/javascript">
    var formDataId = 0;
    layui.use(['form', 'rate', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            rate = layui.rate,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: serverUrl('comment/list'),
            toolbar: '#toolbarDemo',
            // toolbar: true,
            // defaultToolbar: ['filter'],
            cols: [[
                {type: "numbers", width: 80},
                {field: 'username', title: '用户名称', minWidth: 80},
                {field: 'address', title: '地址', minWidth: 80},
                {field: 'content', title: '内容', minWidth: 100},
                {field: 'selectVal', title: 'selectVal', minWidth: 80},
                {field: 'img01', title: '图片', width: 70, width: 70, templet: function (d) {return '<img src="'+d.img01+'" alt="">';}},
                {field: 'img02', title: '图片', width: 70, width: 70, templet: function (d) {return '<img src="'+d.img02+'" alt="">';}},
                {field: 'img03', title: '图片', width: 70, width: 70, templet: function (d) {return '<img src="'+d.img03+'" alt="">';}},
                {field: 'time', title: '时间', width: 100},
                {title: '操作', width: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 25, 50],
            limit: 10,
            page: true,
            done:function(res){
                //table_data = res.data; //全局变量，用在后面排序，与这个循环无关。
                $(res.data).each(function (i, d) {
                    rate.render({
                        elem: '#score'+d.id //给不同的id的rate绑定不同的值
                        , length: 5            //星星个数
                        , value: d.score        //初始化值
                        , half: true           //支持半颗星
                        , text: false           //显示文本，默认显示 '3.5星'
                        , readonly: true      //只读
                    });
                });
            }
        });

        /*table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                formDataId = data.id;
                openFormView('app/comment/form.html', '修改评价');
            }
        });*/

        // 监听搜索操作
        initSearchForm('searchForm', 'currentTableId');

        //监听性别操作
        form.on('switch(statusFilter)', function(obj) {
            var loadLayer = layer.load();
            var params = {
                id: this.value,
                status: obj.elem.checked ? 1 : 2
            };
            $.ajax({
                type: "POST",
                url: serverUrl('app/comment/update'),
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (result) {
                    layer.close(loadLayer);
                    if (result.code === 0) {
                        layer.msg('修改成功', {icon: 1});
                    } else {
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (req, msg) {
                    layer.close(loadLayer);
                    layer.msg(msg, {icon: 2});
                }
            });
        });

    });
</script>

</body>
</html>